<template>
	<view class="my">
		<uni-nav-bar fixed statusBar="" title="我的" :border="false" backgroundColor="#ffcd54" color="#fff"></uni-nav-bar>
		<view class="userInfo pb30">
			<image class="expression" mode="widthFix" src="../../static/images/other/expression.png"></image>
			<view class="dis" >
				<view class="pl15 pr15">
					<image :src="userInfo.avatar" style="width: 140rpx;border-radius: 50%;" mode="widthFix"></image>
				</view>
				<view class="fl1 pl25">
					<view class="fs28 fw700 text-white">{{ userInfo.nickName }}</view>
					<view class="fs26 text-white">您已经连续记账<text class="fs30 fw700">{{ signTotal }}</text>天了，继续坚持哦!</view>
				</view>
			</view>
			<view class="dis mt30">
				<view class="p15 fs28 text-white">
					<text>总资产</text>
					<text class="ml10">{{ priceTotal }}</text>
				</view>
			</view>
		</view>
		<view class="pt30 pb30 pl25 pr25">
			<view class="punch dis_center_s">
				<view class="punch_text fs26 pl30">{{ signFlag ? '今日已完成打卡，请继续坚持' : '今日还未打卡，马上打卡' }}</view>
				<view class="pr30 dis">
					<image style="height: 30rpx;" mode="heightFix" src="../../static/images/other/gold.png"></image>
				</view>
			</view>
		</view>
		<uni-list :border="false">
			<uni-list-item :show-extra-icon="true" @click="$refs.myPopup.open()" :clickable="true" showArrow :extra-icon="{ type: 'mail-open-filled', size: '22', color: '#ffcd54' }" title="导出数据" rightText="导出Excel"></uni-list-item>
			<uni-list-item :show-extra-icon="true" showArrow :extra-icon="{ type: 'notification-filled', size: '22', color: '#ffcd54' }" title="定时提醒"></uni-list-item>
			<uni-list-item :show-extra-icon="true" showArrow :extra-icon="{ type: 'trash', size: '22', color: '#ffcd54' }" title="清理缓存"></uni-list-item>
			<uni-list-item link to="/pages/components/personal/index" :show-extra-icon="true" showArrow :extra-icon="{ type: 'person', size: '22', color: '#ffcd54' }" title="个人中心"></uni-list-item>
		</uni-list>
		<uni-popup type="bottom" ref="myPopup">
			<view style="background-color: #fff;">
				<view class="dis_center_s p20 bb1">
					<button class="basic_button cancal" @click="$refs.myPopup.close()">取消</button>
					<button class="basic_button confirm" @click="confirm">确定</button>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import { downLoadExcel } from '@/config/index.js'
	import { payTypes, payList, icons } from '@/utils/dict-data.js'
	const uniclound = uniCloud.importObject('user')
	const uniSign = uniCloud.importObject('sign_in')
	const uniAccount = uniCloud.importObject('account')
	const uniTransaction = uniCloud.importObject('transaction')
	export default {
		data() {
		   const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			return {
				indicatorStyle: `height: 40px;`,
				signTotal: 0,
				priceTotal: 0,
				signFlag: false,
				years,
				year,
				months,
				month,
				value: [year, month - 1]
			}
		},
		computed: {
			userInfo() {
				return store.state.user.userInfo
			}
		},
		onLoad() {
			this.initSign()
			this.initAccount()
		},
		methods: {
			initSign() {
				uniSign.get().then(res => {
					this.signTotal = res.total
					this.signFlag = res.result
				})
			},
			initAccount() {
				uniAccount.getAccout().then(res => {
					const total = res.data.reduce((total, row) => {
						row.accountType !== '3' && (total += Number(row.balance))
						return total
					}, 0)
					this.priceTotal = total.toFixed(2)
				})
			},
			confirm() {
				uniTransaction.get({ userId: this.userInfo.uid, tallyTime: `${this.year}-${this.month}` }).then(res => {
					if(res.data) {
						downLoadExcel(res.data.map(c => {
							c.transactionType = payTypes.find(k => k.value === c.transactionType).label
							c.icon = icons.find(k => k.value === c.icon).label
							return c
						}))
					} else {
						uni.showToast({
							title: res.msg
						})
					}
					
				})
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				console.log(`${this.year}年${this.month}月`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		position: relative;
		background-color: #ffcd54;
		border-bottom-right-radius: 300rpx;
		.user_login {
			background-color: transparent;
			text-align: start;
			color: #fff;
			font-size: 28rpx;
			padding: 0;
		}
		.user_login::before, .user_login::after {
			content: '';
			border: 0;
		}
		.expression {
			position: absolute;
			top: 123rpx;
			right: 28rpx;
			width: 120rpx;
		}
	}
	.punch {
		position: relative;
		width: 100%;
		background-color: #fdedd4;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #eea03f;
		overflow: hidden;
	}
	.user_btn {
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: red;
		width: 680rpx;
		color: #fff;
	}
	.cancal,.confirm {
		width: 200rpx;
		height: 60rpx;
		font-size: 26rpx;
		border-radius: 6rpx;
	}  
	.confirm {
		background-color: #007aff;
		color: #fff;
	}
	.picker-view {
		width: 750rpx;
		height: 400rpx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>